<template>
  <van-pull-refresh v-model="loadState.pullLoading" disabled @refresh="onRefresh">
    <div class="text-tip">
      {{ tipText }}
    </div>
    <virtual-list
      ref="vsl"
      class="my_scrollbar h-full overflow-y-auto"
      :data-key="'conversationID'"
      :data-sources="conversationStore.storeConversationList"
      :data-component="ConversationListItemVue"
      :estimate-size="88"
      @tobottom="onBottom"
      @scroll="onScoll"
    />
  </van-pull-refresh>
</template>

<script setup lang="ts">
import useConversationStore from '@/store/modules/conversation'
import VirtualList from '@components/VirtualList'
import ConversationListItemVue from './ConversationListItem.vue'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const emit = defineEmits([])

const conversationStore = useConversationStore()
const loadState = reactive({
  loading: false,
  pullLoading: false,
  hasMore: true,
})
const pullDisabled = ref(false)

const tipText = computed(() => {
  if (userStore.reinstall && userStore.progress < 100) {
    return '数据加载中...'
  } else if (conversationStore.storeConversationList.length === 0) {
    return '暂无数据'
  } else {
    return ''
  }
})

const onBottom = async () => {
  if (loadState.hasMore && !loadState.loading) {
    loadState.loading = true
    loadState.hasMore = await conversationStore.getConversationListFromReq(true)
    loadState.loading = false
  }
}

const onScoll = (e: any) => {
  pullDisabled.value = e.target.scrollTop > 0
}

const onRefresh = async () => {
  await conversationStore.getConversationListFromReq()
  loadState.pullLoading = false
}
</script>

<style lang="scss" scoped>
.van-pull-refresh {
  flex: 1;
}
.text-tip {
  font-size: 14px;
  color: #999;
  text-align: center;
}
</style>
